import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:smart_devices/icons/src/antd_icons.dart';
import 'package:smart_devices/ui/draw_line.dart';
import 'package:smart_devices/ui/scroll_refresh_config.dart';
import 'package:smart_devices/utils/colors.dart';
import 'package:smart_devices/utils/styles.dart';
import 'package:smart_devices/utils/tools.dart';

import 'task_logic.dart';

class InventoryTaskView extends GetView<InventoryTaskLogic> {
  const InventoryTaskView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor:
          ColorsUtils.parseColorFromHexString(ColorsUtils.colorF6f6),
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
            size: 15,
          ),
          onPressed: Get.back,
        ),
        automaticallyImplyLeading: false,
        title: Text(
          '盘点任务',
          style: StylesUtils.customTextStyle(
              fontSize: 18, fontWeight: FontWeight.w700),
        ),
        centerTitle: true,
        bottom: PreferredSize(
            preferredSize: const Size.fromHeight(100),
            child: Container(
                alignment: Alignment.centerLeft,
                height: 100,
                decoration: const BoxDecoration(color: Colors.white),
                child: Column(
                  children: [
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              bottom: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString(
                                      ColorsUtils.colorF2f2)))),
                      padding: const EdgeInsets.symmetric(vertical: 7),
                      child: createRow(),
                    )),
                    Expanded(
                        child: Container(
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(
                                        color:
                                            ColorsUtils.parseColorFromHexString(
                                                ColorsUtils.colorF2f2)))),
                            padding: const EdgeInsets.symmetric(vertical: 9.5),
                            child: Obx(() => CupertinoSegmentedControl<int>(
                                  onValueChanged: (int value) {
                                    controller.tabIndex.value = value;
                                    controller.scroll.animateTo(0,
                                        duration:
                                            const Duration(milliseconds: 500),
                                        curve: Curves.linear);
                                  },
                                  children: {
                                    0: Container(
                                      height: 30,
                                      width: 112,
                                      alignment: Alignment.center,
                                      decoration: const BoxDecoration(
                                          borderRadius: BorderRadius.only(
                                              topLeft: Radius.circular(5),
                                              bottomLeft: Radius.circular(5))),
                                      child: Text('未盘(8)',
                                          style: StylesUtils.customTextStyle(
                                              color:
                                                  controller.tabIndex.value == 0
                                                      ? ColorsUtils.colorFfff
                                                      : ColorsUtils.color0052)),
                                    ),
                                    1: Container(
                                      height: 30,
                                      width: 112,
                                      alignment: Alignment.center,
                                      child: Text('已盘(2)',
                                          style: StylesUtils.customTextStyle(
                                              color:
                                                  controller.tabIndex.value == 1
                                                      ? ColorsUtils.colorFfff
                                                      : ColorsUtils.color0052)),
                                    ),
                                    2: Container(
                                      height: 30,
                                      width: 112,
                                      alignment: Alignment.center,
                                      decoration: const BoxDecoration(
                                          borderRadius: BorderRadius.only(
                                              topRight: Radius.circular(5),
                                              bottomRight: Radius.circular(5))),
                                      child: Text('盘盈(0)',
                                          style: StylesUtils.customTextStyle(
                                              color:
                                                  controller.tabIndex.value == 2
                                                      ? ColorsUtils.colorFfff
                                                      : ColorsUtils.color0052)),
                                    ),
                                  },
                                  groupValue: controller.tabIndex.value,
                                  padding: EdgeInsets.zero,
                                  borderColor:
                                      ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.color0052),
                                  unselectedColor: Colors.transparent,
                                  selectedColor:
                                      ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.color0052),
                                ))))
                  ],
                ))),
        elevation: 0,
        actions: [
          IconButton(
              onPressed: () {},
              padding: EdgeInsets.zero,
              alignment: Alignment.center,
              icon: const Icon(
                AntdIcons.scan,
                size: 20,
                color: Colors.white,
              ))
        ],
      ),
      body: Obx(() => scrollRefreshConfig(context)),
      bottomSheet: SafeArea(
        bottom: true,
        child: Container(
          height: 80,
          color: Colors.white,
          child: DrawTopLine(
            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorE6e6),
            child: Row(
              children: [
                Expanded(
                    child: Center(
                  child: Container(
                      constraints:
                          const BoxConstraints.expand(width: 150, height: 40),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: ColorsUtils.parseColorFromHexString(
                              ColorsUtils.color0052)),
                      alignment: Alignment.center,
                      child: TextButton(
                          onPressed: () {},
                          child: Text(
                            '添加盘盈',
                            style: StylesUtils.customTextStyle(),
                          ))),
                )),
                Expanded(
                    child: Center(
                  child: Container(
                    constraints:
                        const BoxConstraints.expand(width: 150, height: 40),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        border: Border.all(
                            color: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.color0052))),
                    child: Text(
                      '结束盘盈',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color0052),
                    ),
                  ),
                ))
              ],
            ),
          ),
        ),
      ),
      extendBody: true,
    );
  }

  Row createRow() {
    return Row(
      children: [
        Expanded(
            child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              border: Border.all(
                  color: ColorsUtils.parseColorFromHexString(
                      ColorsUtils.colorE4e4))),
          child: Row(
            children: [
              Container(
                  width: 36,
                  alignment: Alignment.center,
                  child: Icon(
                    AntdIcons.search,
                    size: 20,
                    color: ColorsUtils.parseColorFromHexString(
                        ColorsUtils.color9999),
                  )),
              Expanded(
                  child: Obx(() => TextField(
                        textDirection: TextDirection.ltr,
                        controller: TextEditingController(
                            text: controller.search.value),
                        cursorColor: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.color1c24),
                        style: StylesUtils.customTextStyle(
                            fontSize: 16, color: ColorsUtils.color1c24),
                        textAlign: TextAlign.left,
                        textAlignVertical: TextAlignVertical.center,
                        cursorWidth: 2,
                        // cursorHeight: 18,
                        cursorRadius: const Radius.circular(2),
                        decoration: InputDecoration(
                            hintText: '请输入报修主题/报修单号/设备名称',
                            hintStyle: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorCccc, fontSize: 13),
                            isDense: true,
                            isCollapsed: true,
                            border: InputBorder.none,
                            focusColor: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.color1c24),
                            contentPadding:
                                const EdgeInsets.symmetric(vertical: 13),
                            focusedBorder: InputBorder.none),
                        onChanged: (String text) {
                          controller.search.value = text;
                        },
                      ))),
            ],
          ),
        )),
        Container(
          width: 60,
          alignment: Alignment.center,
          child: Text.rich(TextSpan(children: [
            WidgetSpan(
                alignment: PlaceholderAlignment.middle,
                child: ToolsUtils.assetImageSvg('u2226.svg',
                    width: 15, height: 15)),
            TextSpan(
                text: '筛选',
                style:
                    StylesUtils.customTextStyle(color: ColorsUtils.color3333))
          ])),
        ),
      ],
    );
  }

  Widget scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: controller.refreshController,
      onRefresh: controller.onRefresh,
      onLoading: controller.onLoading,
      child: listViewBuilder(context),
    );
  }

  Widget listViewBuilder(BuildContext context) {
    return ListView.builder(
      controller: controller.scroll,
      itemExtent: 110,
      itemBuilder: itemBuilder,
      itemCount: controller.pageList.length,
      padding: const EdgeInsets.only(bottom: 90),
    );
  }

  Widget itemBuilder(BuildContext context, int index) {
    final item = controller.pageList[index];
    return Container(
      margin: const EdgeInsets.only(top: 10),
      decoration: const BoxDecoration(color: Colors.white),
      child: Row(
        children: [
          Container(
            width: 100,
            height: 100,
            alignment: Alignment.center,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(5),
              child: Image.network(
                item.imgUrl,
                width: 80,
                height: 80,
              ),
            ),
          ),
          Expanded(
              child: Column(
            children: [
              Container(
                height: 40,
                alignment: Alignment.centerLeft,
                child: Text(
                  item.name,
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color3333,
                      fontSize: 16,
                      fontWeight: FontWeight.w700),
                ),
              ),
              Container(
                height: 30,
                alignment: Alignment.centerLeft,
                child: Text(
                  item.code,
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.colorAaaa),
                ),
              ),
              Container(
                height: 30,
                alignment: Alignment.centerLeft,
                child: Text(
                  item.location,
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.colorAaaa),
                ),
              ),
            ],
          ))
        ],
      ),
    );
  }
}
